<!-- 页面设置 -->
<template>
    <el-dialog
        v-model="showDialog"
        title="页面设置"
        width="360px"
        append-to-body
        destroy-on-close
        @close="onClose"
    >
        <el-scrollbar height="360px">
            <el-form ref="formRef" :model="config" label-width="80px">
                <el-form-item label="页面名称">
                    <el-input v-model="config.name"></el-input>
                </el-form-item>
                <el-form-item label="背景颜色">
                    <color-picker
                        v-model="config['background-color']"
                        show-alpha
                        size="default"
                    />
                </el-form-item>
                <el-form-item label="背景图片">
                    <image-picker
                        v-model="config['background-image']"
                        :show-label="false"
                        :size="70"
                        type="image"
                        add-url
                    />
                </el-form-item>
                <el-form-item label="设为首页">
                    <el-switch v-model="currentIsHome"></el-switch>
                </el-form-item>
                <el-form-item label="是否登录">
                    <el-switch v-model="config.needLogin"></el-switch>
                </el-form-item>
                <template v-if="config.needLogin">
                    <el-form-item label="查看权限">
                        <user-role-setting
                            v-model:role="config.appRole"
                            v-model:roleData="config.appRoleData"
                        />
                    </el-form-item>
                    <el-form-item label="绑定手机">
                        <el-switch v-model="config.bindPhone"></el-switch>
                    </el-form-item>
                </template>
                <el-form-item label="下拉刷新">
                    <el-switch v-model="config.pullRefresh"></el-switch>
                </el-form-item>
                <el-form-item label="分享设置">
                    <div class="share-warp">
                        <el-radio-group v-model="config.share" class="share-group">
                            <el-radio :label="false">默认</el-radio>
                            <el-radio :label="true">自定义</el-radio>
                        </el-radio-group>
                        <div v-if="config.share" class="share-content">
                            <div class="row-item">
                                <div class="row-item-title">分享标语</div>
                                <el-input
                                    v-model="config['share_title']"
                                    placeholder="请输入标语内容"
                                    size="small"
                                    class="row-item-input"
                                />
                            </div>
                            <div class="row-item">
                                <div class="row-item-title">分享图片</div>
                                <image-picker
                                    v-model="config['share_img']"
                                    :show-label="false"
                                    :size="70"
                                    type="image"
                                />
                            </div>
                            <div class="share-tip-txt">
                                注：图片建议宽高5:4，大小不超过1M，当前的分享设置只适用于当前页面。
                            </div>
                        </div>
                    </div>
                </el-form-item>
            </el-form>
        </el-scrollbar>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="onCancel">取消</el-button>
                <el-button type="primary" @click="onConfirm">确认</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script>
import { defineComponent, ref } from 'vue'
import { randomStr, deepClone } from '@/libs/tools'
import bus from '@/libs/bus'
import ColorPicker from '@/components/color-picker'
import UserRoleSetting from '@/components/edit/user-role-setting'
export default defineComponent({
    name: 'PageSetting',
    components: {
        ColorPicker,
        UserRoleSetting
    },
    setup() {
        const busId = randomStr(16)
        const showDialog = ref(false)
        const config = ref({})
        const currentIsHome = ref(false)

        const show = data => {
            const { pageConfig, isHome } = data
            config.value = deepClone(pageConfig)
            currentIsHome.value = isHome
            showDialog.value = true
            return new Promise((resolve, reject) => {
                bus.on(`${busId}-confirm`, () => {
                    showDialog.value = false
                    resolve({
                        config: config.value,
                        isHome: currentIsHome.value
                    })
                })
                bus.on(`${busId}-cancel`, () => {
                    showDialog.value = false
                    reject()
                })
            })
        }

        const onClose = () => {
            bus.off(`${busId}-confirm`)
            bus.off(`${busId}-cancel`)
        }

        const onCancel = () => {
            bus.emit(`${busId}-cancel`)
        }
        const onConfirm = () => {
            bus.emit(`${busId}-confirm`)
        }

        return {
            showDialog,
            config,
            currentIsHome,

            show,
            onClose,
            onCancel,
            onConfirm
        }
    }
})
</script>

<style lang="less" scoped>
.share-warp {
    .share-group {
        .el-radio {
            display: block;
        }
    }
    .share-content {
        background-color: var(--edit-fill-color-light);
        padding: 10px;
        border: 1px solid var(--edit-border-color);
        .row-item {
            display: flex;
            align-items: center;
            .row-item-title {
                margin-right: 10px;
            }
            .row-item-input {
                flex: 1;
            }
        }
        .row-item + .row-item {
            margin-top: 10px;
        }
    }
    .share-tip-txt {
        margin-top: 10px;
        color: rgb(159, 165, 187);
        font-size: 12px;
        line-height: 22px;
    }
}
</style>